<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<style type="text/css">
	#console{
		background-color:black;
		color:white;
		border:1px #ddd solid;
		height:200px;
		widht:500px;
		overflow: auto;
		font-size:12px;
	}
	
	.pop{
		background-color:white;
		height:25px;
		line-height:25px;
		border:1px #ddd solid;
		padding:5px 20px;
		position:absolute;
		left:40%;
		top:40%;
		display:none;
		width:80px;
		text-align: center;
	}
</style>
</head>
<body>
<form action="" method="post" name="formMain">
号码:<input type="text" name="phone" id="phone" value="13558554797"/><br />
内容:<textarea rows="4" cols="50" name="message" id="message" >mao</textarea><br />
<input type="submit" value="发送"/>
</form>
<hr />
<div id="console" name="console"></div>

<script type="text/javascript">
var Console = {
		_console : document.getElementById('console'),
		log:function(){
			var el = null;
			for(var i = 0; i < arguments.length; i++){
				el = document.createElement('div');
				el.innerHTML = arguments[i];
				this._console.appendChild(el);
			}
			el = null;
			delete el;
			//设置滚动条始终滚动到最下面
			this._console.scrollTop = this._console.scrollHeight;
		}
};

var Loading = {
		limit:30,
		current:0,
		interval:null,
		el:null,
		show:function(id){
			if(this.interval!=null){
				this.stop();
				return;
			}
			this.el = document.getElementById(id);
			this.run();
			this.interval = setInterval(this.run,500);
			this.el.style.display = 'block';
		},
		stop:function(){
			if(this.interval != null){
				clearInterval(this.interval);
				this.interval = null;
				this.el.style.display = 'none';
			}
		},
		run:function(){
			Loading.el.innerHTML = 'loading' + Loading.re('.');
		},
		re:function(lmit){
			this.current++;
			var str = [];
			for(var i=0;i<this.current;i++){
				str.push('');
			}
			if(this.current > this.limit) this.current = 0;
			return str.join(lmit);
		}
};

var formMain = document.forms.formMain;
formMain.onsubmit = function(){
	$.ajax({
		url:'index.php/Mao/ApiJson?_Sm=5E36C94E12A9C7455E282C531A53BA94',
		data:{
			message:$('#message').val(),
			phone:$('#phone').val()
		},
		dataType:'json',
		type:'POST',
		beforeSend:function(xmlHttp){
			xmlHttp.setRequestHeader('Client-Auth-Code','123123');
			xmlHttp.setRequestHeader('Mode','CALL');
		},
		success:function(json){
			Console.log(json.MSG);
		},
		error:function(Xml){
			Console.log(Xml.responseText,'ERROR');
		}
	});
	//Loading.show('pop');
	//Console.log(this.phone.value,this.message.value);
	return false;
}
</script>

<div class="pop" id="pop">
loading
</div>
</body>
</html>